<!-- 推荐路由 -->
<template>
  <div class="recommend">
    <!-- -------------------------- -->
    <ul class="goods" ref="">
      <goods-list tab="li" v-for="(item,i) in recommendGoodsList" :key="i" :goodsItem='item'></goods-list>
    </ul>
  </div>
</template>

<script>
import GoodsList from '../../components/Recommend/GoodsList'
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      pageParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.$store.dispatch('resRecommendGoods', this.pageParams)
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  components: {
    GoodsList
  },
  computed: {
    ...mapState(['recommendGoodsList'])
  },
  watch: {
    recommendGoodsList () {
      this.$nextTick(() => {
        // 初始化滚动条
        this._initBScroll()
        this.shopList.refresh()
        console.log(1)
      })
    }
  },
  methods: {
    _initBScroll () {
      // eslint-disable-next-line no-new
      this.shopList = new BScroll('.recommend', {
        scrollY: true,
        probeType: 3
      })
      this._eventScroll()
    },
    _eventScroll () {
      this.shopList.on('touchEnd', (pos) => {
        if (pos.y > 40) {
          console.log('上拉加载')
        }
        // -500       >  -500+20
        if (this.shopList.maxScrollY > pos.y + 20) {
          const loading = this.$loading()
          setTimeout(() => {
            loading.close()
            this.pageParams.pageNum++
            this.$store.dispatch('resRecommendGoods', this.pageParams)
          }, 2000)
        }
      })
    }
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.recommend {
  background: #f5f5f5;
  height: 100%;
  overflow: hidden;

  .goods {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 50px;
  }
}
.demo-loading-wrap {
  height: 300px;
  position: relative;
}
</style>
